<template>
    <div class="main">
        <div class="img">
            <img src="@/../public/img/每时每刻.png" alt="">
        </div>
        <div class="box">
            <div class="bx">
                <div>
                    <input type="text" placeholder="请输入手机号" v-model="tel">
                </div>

            </div>
            <div class="bx">
                <div>
                    <input type="password" v-model="password" placeholder="请输入密码">
                </div>
                <div>

                </div>
            </div>
            <div class="bx" style="color:#ccc;border:none;font-size: 0.2rem;">
                <div>
                    密码登录
                </div>
                <div style="color:#ccc;font-size: 0.2rem;" @click="$router.push('/note')">
                    使用验证码登录
                </div>
            </div>
            <van-button color="#ff8c41" class="vanbutton" @click="logins">登录
            </van-button>
        </div>
    </div>
</template>

<script setup>
import { login } from '../../http/my'
import { Notify } from "vant";
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import 'vant/es/toast/style';
import 'vant/es/notify/style';
const { push } = useRouter()
//手机号
const tel = ref('')
const password = ref('')
const obj = reactive({
    mobile: '',
    password: '',
    type: 1,
    client: 1
})

const logins = () => {

    obj.mobile = tel.value
    obj.password = password.value
    login({ ...obj }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
            // 成功通知
            Notify({ type: 'success', message: '登陆成功' });
            localStorage.setItem('msmkcode', JSON.stringify(res.data.data))
            push('/my')
        } else {
            // 警告通知
            Notify({ type: 'warning', message: '登陆失败' });
        };

    })
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;

    .img {
        width: 100%;
        height: 18vh;
        box-sizing: border-box;

        >img {
            width: 60%;
            height: 90%;
            margin: auto;
            display: block;
            margin-top: 40px;
        }
    }
}

.box {
    width: 90%;
    margin: auto;


    .bx {
        height: 30px;
        line-height: 30px;
        margin: 6px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        font-size: 12px;

        >div:nth-child(1) {
            width: 70%;

            >input {
                width: 100%;
                height: 100%;
                border: none;
            }
        }

        >div:nth-child(2) {
            width: 30%;
            height: 30px;
            text-align: center;
            color: #ed8547;
        }
    }
}

.vanbutton {
    width: 300px;
    height: 40px;
    border-radius: 20px
}
</style>